<template>
    <div class="yuan-container container">
        <a-card title="提取物流水账">
            <a-tabs type="card" @change="tabChange">
                <a-tab-pane v-for="(item, i) in tabsData" :key="item" :tab="item">
                    <div class="filter-panel">
                        <div class="filter-list" style="float: right;margin-right: 0">
                            <a-button style="margin-right:5px" type="primary" @click="add">新增</a-button>
<!--                            <a-button type="primary" @click="downloadTemplate">下载导入模板</a-button>-->
<!--                            <a-upload name="file" :multiple="false" :before-upload="beforeUpload" :showUploadList="false">-->
<!--                                <a-button type="primary" style="margin-left: 5px;margin-right: 0">导入</a-button>-->
<!--                            </a-upload>-->
                        </div>
                    </div>
                    <a-table
                        :scroll="{ x: 1500 }"
                        :loading="tableOption.loading"
                        bordered
                        :rowKey="item=>item.id"
                        :data-source="tableOption.dataSource"
                        :columns="tableOption.tableColumns"
                        :pagination="tableOption.pagination">
                    </a-table>
                </a-tab-pane>
            </a-tabs>
        </a-card>
        <!-- 弹窗表单 -->
        <addOrEdit :formData="formData" :tabName="curTab" :visible="formShow" :editId="formEditId" @closeModal="formClose"></addOrEdit>
    </div>
</template>
<script lang="ts">
import {Vue, Component, Watch} from 'vue-property-decorator';
import nextApi from "@/api/nextApi";
import {h} from "vue";
import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";
import AddOrEdit from "@/views/reportMgt/powderJournal/components/addOrEdit.vue";
import {downLoadFile,processDataSourceForMerging} from "@/utils";
@Component({
    components: {AddOrEdit}
})
export default class extends Vue {
    locale = locale;
    tabsData = ["喷干-过筛","总混二-制粒"]
    //表格配置
    tableOption: any = {
        loading:false,
        tableColumns: [],
        dataSource: [],
        pagination: {
            pageSize: 10,
            current: 1,
            total: 0,
            showTotal: (total: number) => `共${total}条`,
            onChange: this.pageChange,
        }
    }
    mounted() {
        this.tabChange(this.tabsData[0])
    }
    async getTableData(){
        try {
            this.tableOption.loading = true
            let params = {
                pageSize: this.tableOption.pagination.pageSize,
                page: this.tableOption.pagination.current,
                inventoryType: this.curTab

            }
            // 假设从后端获取的原始数据
            const res = await nextApi.productStorageList(params)
            let rawData = res.data?.records || []

            // 用于演示合并效果的假数据 (您可以删除这段，使用上面从接口获取的数据)
            if (this.curTab === '喷干-过筛') {
                 rawData = [
                    {
                        id: 1,
                        earnDate: "2022-03-01",
                        standardType: "标准一",
                        materialName: "Material1",
                        productionType: "生产一",
                        batch: "Batch1",
                        spec: "Spec1",
                        weight: "100",
                        bagNum: "10",
                        bigBagNum:"2022-03-05",
                        PKweight: "95",
                        warehousingNum: "9",
                        wholeNum: "5",
                    },
                    {
                        id: 2,
                        earnDate: "2022-03-01",
                        standardType: "标准一",
                        materialName: "Material2",
                        productionType: "生产一",
                        batch: "Batch1",
                        spec: "Spec1",
                        weight: "100",
                        bagNum: "10",
                        bigBagNum:"2022-03-05",
                        PKweight: "95",
                        warehousingNum: "9",
                        wholeNum: "5",
                    },
                    {
                         id: 3,
                         earnDate: "2022-03-02",
                         standardType: "标准二",
                         materialName: "MaterialA",
                         productionType: "生产二",
                         batch: "BatchA",
                         spec: "SpecA",
                         weight: "200",
                         bagNum: "20",
                         bigBagNum:"2022-03-06",
                         PKweight: "190",
                         warehousingNum: "19",
                         wholeNum: "10",
                     },
                     {
                         id: 4,
                         earnDate: "2022-03-03",
                         standardType: "标准三",
                         materialName: "MaterialB",
                         productionType: "生产三",
                         batch: "BatchB",
                         spec: "SpecB",
                         weight: "300",
                         bagNum: "30",
                         bigBagNum:"2022-03-07",
                         PKweight: "280",
                         warehousingNum: "28",
                         wholeNum: "20",
                     },
                     {
                         id: 5,
                         earnDate: "2022-03-03",
                         standardType: "标准三",
                         materialName: "MaterialC",
                         productionType: "生产三",
                         batch: "BatchB",
                         spec: "SpecB",
                         weight: "300",
                         bagNum: "30",
                         bigBagNum:"2022-03-07",
                         PKweight: "280",
                         warehousingNum: "28",
                         wholeNum: "20",
                     }
                ]
            }

            this.tableOption.dataSource = processDataSourceForMerging(rawData, 'earnDate', [
                'earnDate', 'standardType', 'productionType', 'batch', 'spec', 'action','weight'
            ]);

            this.tableOption.pagination.total = res.data?.total || 0 // 如果使用假数据， total 可能需要调整
            console.log(this.tableOption.dataSource)
        }finally {
            this.tableOption.loading = false
        }

    }
    pageChange(page: number, pageSize: number) {
        this.tableOption.pagination.current = page
        this.getTableData()
    }
    /**
     * @description tab切换
     * **/
    curTab: string = ''
    tabChange(e){
        this.curTab = e
        this.changeColumn()
    }
    changeColumn(){
        switch (this.curTab) {
            case '喷干-过筛':
                this.tableOption.tableColumns = [
                    {
                        title: "喷干入",
                        align: "center",
                        children: [
                            {
                                title: "收入日期",
                                dataIndex: "earnDate",
                                key: "earnDate",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                    const obj: { children: any; attrs: { rowSpan?: number } } = {
                                        children: text,
                                        attrs: {},
                                    }
                                    // 应用计算出的 rowSpan
                                    const rowSpan = record._rowSpan_earnDate;
                                    if (rowSpan !== undefined) {
                                         obj.attrs.rowSpan = rowSpan;
                                    }
                                    return obj;
                                },
                            },
                            {
                                title: "标准类型",
                                dataIndex: "standardType",
                                key: "standardType",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                    const obj: { children: any; attrs: { rowSpan?: number } } = {
                                        children: text,
                                        attrs: {},
                                    }
                                    // 应用计算出的 rowSpan
                                     const rowSpan = record._rowSpan_standardType;
                                     if (rowSpan !== undefined) {
                                        obj.attrs.rowSpan = rowSpan;
                                     }
                                    const select = h(
                                        "a-select",
                                        {
                                            style: { width: "100%" },
                                            props: {
                                                value: record.standardType,
                                                options: [
                                                    {
                                                        label: "国标",
                                                        value: "国标",
                                                    },
                                                    {
                                                        label: "省标",
                                                        value: "省标",
                                                    },
                                                    {
                                                        label: "省标-北京",
                                                        value: "省标-北京",
                                                    },
                                                    {
                                                        label: "省标-上海",
                                                        value: "省标-上海",
                                                    },
                                                ]
                                            },
                                            on: {
                                                change: (value: any) => {
                                                    record.standardType = value
                                                    // this.getTableData()
                                                },
                                            },
                                        }
                                    )
                                    obj.children = select; // 将选择框作为子元素
                                    return obj;
                                },
                            },
                            {
                                title: "品名", // 品名不合并
                                dataIndex: "materialName",
                                key: "materialName",
                                align: "center",
                                width: 150,
                            },
                            {
                                title: "生产类型",
                                dataIndex: "productionType",
                                key: "productionType",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                     const obj: { children: any; attrs: { rowSpan?: number } } = {
                                         children: text,
                                         attrs: {},
                                     }
                                    // 应用计算出的 rowSpan
                                     const rowSpan = record._rowSpan_productionType;
                                     if (rowSpan !== undefined) {
                                         obj.attrs.rowSpan = rowSpan;
                                     }
                                    const select = h(
                                        "a-select",
                                        {
                                            style: { width: "100%" },
                                            props: {
                                                value: record.productionType,
                                                options: [
                                                    { label: "CW", value: "CW" },
                                                    { label: "SY", value: "SY" },
                                                    { label: "G", value: "G" },
                                                ]
                                            },
                                            on: {
                                                change: (value: any) => {
                                                    record.productionType = value
                                                },
                                            },
                                        }
                                    )
                                     obj.children = select;
                                     return obj;
                                },
                            },
                            {
                                title: "批号",
                                dataIndex: "batch",
                                key: "batch",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                     const obj: { children: any; attrs: { rowSpan?: number } } = {
                                         children: text,
                                         attrs: {},
                                     }
                                    // 应用计算出的 rowSpan
                                     const rowSpan = record._rowSpan_batch;
                                     if (rowSpan !== undefined) {
                                         obj.attrs.rowSpan = rowSpan;
                                     }
                                    const input = h(
                                        "a-input",
                                        {
                                            style: { width: "100%" },
                                            props: { value: record.batch, },
                                            on: { change: (e: any) => { record.batch = e.target.value }},
                                        }
                                    )
                                    obj.children = input;
                                    return obj;
                                }
                            },
                            {
                                title: "规格",
                                dataIndex: "spec",
                                key: "spec",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                     const obj: { children: any; attrs: { rowSpan?: number } } = {
                                         children: text,
                                         attrs: {},
                                     }
                                    // 应用计算出的 rowSpan
                                     const rowSpan = record._rowSpan_spec;
                                     if (rowSpan !== undefined) {
                                         obj.attrs.rowSpan = rowSpan;
                                     }
                                    const input = h(
                                        "a-input",
                                        {
                                            style: { width: "100%" },
                                            props: { value: record.spec, },
                                            on: { change: (e: any) => { record.spec = e.target.value }},
                                        }
                                    )
                                    obj.children = input;
                                    return obj;
                                }
                            },
                            {
                                title: "喷干重量(kg)", // 不合并
                                dataIndex: "weight",
                                key: "weight",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                    return h(
                                        "a-input",
                                        {
                                            style: { width: "100%" },
                                            props: { value: record.weight, },
                                            on: { change: (e: any) => { record.weight = e.target.value }},
                                        }
                                    )
                                }
                            },
                            {
                                title: "喷干件数", // 不合并
                                dataIndex: "bagNum",
                                key: "bagNum",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                    return h(
                                        "a-input",
                                        {
                                            style: { width: "100%" },
                                            props: { value: record.bagNum, },
                                            on: { change: (e: any) => { record.bagNum = e.target.value }},
                                        }
                                    )
                                }
                            },
                        ],
                    },
                    {
                        title: "过筛领",
                        align: "center",
                        children: [
                            {
                                title: "出库日期",
                                dataIndex: "bigBagNum",
                                key: "bigBagNum",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                    const datePicker = h(
                                        "a-date-picker",
                                        {
                                            props: {
                                                value: record.bigBagNum,
                                                locale: this.locale,
                                                valueFormat: "YYYY-MM-DD",
                                            },
                                            on: {
                                                change: (date: any) => { record.bigBagNum = date }
                                            },
                                            style: { width: "100%" },
                                        }
                                    )
                                    return h("div", [datePicker])
                                },

                            },
                            {
                                title: "喷干重量(kg)",
                                dataIndex: "PKweight",
                                key: "PKweight",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                    return h(
                                        "a-input",
                                        {
                                            style: { width: "100%" },
                                            props: { value: record.PKweight, },
                                            on: { change: (e: any) => { record.PKweight = e.target.value }},
                                        }
                                    )
                                },
                            },
                            {
                                title: "过筛件数",
                                dataIndex: "warehousingNum",
                                key: "warehousingNum",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                    return h(
                                        "a-input",
                                        {
                                            style: { width: "100%" },
                                            props: { value: record.warehousingNum, },
                                            on: { change: (e: any) => { record.warehousingNum = e.target.value }}
                                        }
                                    )
                                }
                            },
                            {
                                title: "收粉结存",
                                dataIndex: "wholeNum",
                                key: "wholeNum",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                    return h(
                                        "a-input",
                                        {
                                            style: { width: "100%" },
                                            props: { value: record.wholeNum, },
                                            on: { change: (e: any) => { record.wholeNum = e.target.value }}
                                        }
                                    )
                                }
                            },
                        ]
                    },
                    {
                        align: "center",
                        dataIndex: "action",
                        key: "action",
                        title: "操作",
                        width: 260,
                         customRender: (text: any, record: any) => {
                              const obj: { children: any; attrs: { rowSpan?: number } } = {
                                  children: text,
                                  attrs: {},
                              }
                              // 应用计算出的 rowSpan
                              const rowSpan = record._rowSpan_action;
                              if (rowSpan !== undefined) {
                                   obj.attrs.rowSpan = rowSpan;
                              }
                            const editBtn = h(
                                "a-button",
                                {
                                    style: { marginRight: "5px" },
                                    props: { icon: "edit", type: "primary", size: "small" },
                                    on: { click: () => this.edit(record) },
                                },
                                "编辑"
                            );
                            const delBtn = h(
                                "a-button",
                                {
                                    style: { marginRight: "5px" },
                                    props: { icon: "edit", type: "danger", size: "small" },
                                    on: { click: () => this.del(record) },
                                },
                                "删除"
                            );
                            const btn: any[] = [];
                            btn.push(editBtn);
                            btn.push(delBtn);
                            obj.children = h("div", btn);
                            return obj;
                        },
                    },
                ]
                this.getTableData()
                break;
            case "总混二-制粒":
                this.tableOption.tableColumns = [
                    {
                        title: '总混(二)入',
                        align: "center",
                        children: [
                            {
                                title: "收入日期",
                                dataIndex: "storageDate",
                                key: "storageDate",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                    const datePicker = h(
                                        "a-date-picker",
                                        {
                                            props: {
                                                value: record.storageDate,
                                                locale: this.locale,
                                                valueFormat: "YYYY-MM-DD",
                                            },
                                            on: {
                                                change: (date: any) => { record.storageDate = date }
                                            },
                                            style: { width: "100%" },
                                        }
                                    )
                                    return h("div", [datePicker])
                                }
                            },
                            {
                                title: "标准类型",
                                dataIndex: "standardType",
                                key: "standardType",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                    const select = h(
                                        "a-select",
                                        {
                                            style: { width: "100%" },
                                            props: {
                                                value: record.standardType,
                                                options: [
                                                    { label: "国标", value: "国标" },
                                                    { label: "省标", value: "省标" },
                                                    { label: "省标-北京", value: "省标-北京" },
                                                    { label: "省标-上海", value: "省标-上海" },
                                                ]
                                            },
                                            on: {
                                                change: (value: any) => { record.standardType = value }
                                            },
                                        }
                                    )
                                    return h("div", [select])
                                },
                            },
                            {
                                title: "品名",
                                dataIndex: "materialName",
                                key: "materialName",
                                align: "center",
                                width: 150,

                            },
                            {
                                title: "生产类型",
                                dataIndex: "productionType",
                                key: "productionType",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                    const select = h(
                                        "a-select",
                                        {
                                            style: { width: "100%" },
                                            props: {
                                                value: record.productionType,
                                                options: [
                                                    { label: "CW", value: "CW" },
                                                    { label: "SY", value: "SY" },
                                                    { label: "G", value: "G" },
                                                ]
                                            },
                                            on: {
                                                change: (value: any) => { record.productionType = value }
                                            },
                                        }
                                    )
                                    return h("div", [select])
                                },
                            },
                            {
                                title: "批号",
                                dataIndex: "batch",
                                key: "batch",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                    return h(
                                        "a-input",
                                        {
                                            style: { width: "100%" },
                                            props: { value: record.batch, },
                                            on: { change: (e: any) => { record.batch = e.target.value }},
                                        }
                                    )
                                },
                            },
                            {
                                title: "规格",
                                dataIndex: "spec",
                                key: "spec",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                    return h(
                                        "a-input",
                                        {
                                            style: { width: "100%" },
                                            props: { value: record.spec, },
                                            on: { change: (e: any) => { record.spec = e.target.value }}
                                        }
                                    )
                                }
                            },
                            {
                                title: "混二重量(kg)",
                                dataIndex: "bagNum",
                                key: "bagNum",
                                align: "center",
                                width: 150,

                                customRender: (text: any, record: any) => {
                                    return h(
                                        "a-input",
                                        {
                                            style: { width: "100%" },
                                            props: { value: record.bagNum, },
                                            on: { change: (e: any) => { record.bagNum = e.target.value }},
                                        }
                                    )
                                },
                            },
                            {
                                title: "混二件数",
                                dataIndex: "deliverTime",
                                key: "deliverTime",
                                align: "center",
                                width: 150,

                                customRender: (text: any, record: any) => {
                                    return h(
                                        "a-input",
                                        {
                                            style: { width: "100%" },
                                            props: { value: record.deliverTime, },
                                            on: { change: (e: any) => { record.deliverTime = e.target.value }}
                                        }
                                    )
                                }
                            },
                        ]
                    },
                    {
                        title: "制粒领",
                        align: "center",
                        children: [
                            {
                                title: "出库日期",
                                dataIndex: "deliverNum",
                                key: "deliverNum",
                                align: "center",
                                width: 150,

                                customRender: (text: any, record: any) => {
                                    const datePicker = h(
                                        "a-date-picker",
                                        {
                                            props: {
                                                value: record.deliverNum,
                                                locale: this.locale,
                                                valueFormat: "YYYY-MM-DD",
                                            },
                                            on: {
                                                change: (date: any) => { record.deliverNum = date }
                                            },
                                            style: { width: "100%" },
                                        }
                                    )
                                    return h("div", [datePicker])
                                }
                            },
                            {
                                title: "制粒重量(kg)",
                                dataIndex: "surplus",
                                key: "surplus",
                                align: "center",
                                width: 150,

                                customRender: (text: any, record: any) => {
                                    return h(
                                        "a-input",
                                        {
                                            style: { width: "100%" },
                                            props: { value: record.surplus, },
                                            on: { change: (e: any) => { record.surplus = e.target.value }}
                                        }
                                    )
                                }
                            },
                            {
                                title: "制粒件数",
                                dataIndex: "position",
                                key: "position",
                                align: "center",
                                width: 150,

                                customRender: (text: any, record: any) => {
                                    return h(
                                        "a-input",
                                        {
                                            style: { width: "100%" },
                                            props: { value: record.position, },
                                            on: { change: (e: any) => { record.position = e.target.value }}
                                        }
                                    )
                                }
                            },
                            {
                                title: "混二结存(kg)",
                                dataIndex: "odd",
                                key: "odd",
                                align: "center",
                                width: 150,
                                customRender: (text: any, record: any) => {
                                    return h(
                                        "a-input",
                                        {
                                            style: { width: "100%" },
                                            props: { value: record.odd, },
                                            on: { change: (e: any) => { record.odd = e.target.value }}
                                        }
                                    )
                                }
                            },
                        ]
                    },
                    {
                        align: "center",
                        dataIndex: "action",
                        key: "action",
                        title: "操作",
                        width: 260,
                        customRender: (text: any, record: any) => {
                            const editBtn = h(
                                "a-button",
                                {
                                    style: { marginRight: "5px" },
                                    props: { icon: "edit", type: "primary", size: "small" },
                                    on: { click: () => this.edit(record) },
                                },
                                "编辑"
                            );
                            const delBtn = h(
                                "a-button",
                                {
                                    style: { marginRight: "5px" },
                                    props: { icon: "edit", type: "danger", size: "small" },
                                    on: { click: () => this.del(record) },
                                },
                                "删除"
                            );
                            const btn: any[] = [];
                            btn.push(editBtn);
                            btn.push(delBtn);
                            return h("div", btn);
                        },
                    },
                ]
                this.getTableData()
                break;
            default:
                this.tableOption.tableColumns = []
                this.tableOption.tableData = []
        }
        this.tableOption.tableColumns.forEach(item => {
            item.width = 150
            if (item.title == '操作') item.fixed = 'right'
        })
        const lastColumn = this.tableOption.tableColumns[this.tableOption.tableColumns.length - 1];
        if (lastColumn && !lastColumn.children) {
             lastColumn.width = 220;
        } else if (lastColumn && lastColumn.children) {
             const lastChildColumn = lastColumn.children[lastColumn.children.length - 1];
             if (lastChildColumn) {
                 lastChildColumn.width = 220;
             }
        }

    }
    formShow = false
    add(){
        this.formShow = true
    }
    formData: any = {}
    formEditId = ''
    edit(record: any){
        this.formShow = true
        this.formEditId = record.id
        this.formData = record
    }
    del(record: any){
    }
    formClose(){
        this.formShow = false
        this.tabChange(this.curTab)
        this.formEditId = ''
    }
    downloadTemplate(){
        this.tableOption.loading = true
        nextApi.getProductStorageImportTemplate(this.curTab, '配方颗粒', (res: any) => {
            const blob = new Blob([res.data], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                // type: "application/vnd.ms-excel",
            });
            downLoadFile(blob, this.curTab + "库存表导入模板");
            this.tableOption.loading = false;
        });
    }
    beforeUpload(file: any) {
        let formData = new FormData();
        formData.append("file", file);
        formData.append("inventoryType", this.curTab)
        this.uploadTemplate(formData);
        return false;
    }
    async uploadTemplate(formData: any) {
        this.tableOption.loading = true;
        try {
            const res = await nextApi.importProductStorage(formData);
            this.$message.success(res.msg);
            await this.getTableData()
        } finally {
            this.tableOption.loading = false;
        }
    }
}
</script>
<style scoped lang="scss">
</style>
